<template>
    <div id="HomeUsers">
        <el-card v-loading="loading" shadow="none">
            <div slot="header">
                用户管理
                <el-button size="mini" type="primary" @click="add()">
                    添加
                </el-button>
            </div>
            <el-input style="margin-bottom: 10px;" v-model="fieldVal" placeholder="请输入内容">
                <el-select style="width:100px" v-model="field" slot="prepend" placeholder="请选择">
                    <el-option label="用户名" value="username">
                    </el-option>
                    <el-option label="手机" value="phone">
                    </el-option>
                    <el-option label="邮箱" value="email">
                    </el-option>
                </el-select>
                <el-button @click="search" slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </el-card>
        <el-table v-loading="loading" :data="users">
            <el-table-column prop="username" label="用户名" width="">
            </el-table-column>
            <el-table-column prop="gender" label="性别" width="">
                <div slot-scope="{row}">
                    <el-button v-if="row.gender=='m'" circle type="primary" size="mini">男</el-button>
                    <el-button v-else type="danger" circle size="mini">女</el-button>
                </div>
            </el-table-column>
            <el-table-column prop="phone" label="手机" width="">
            </el-table-column>
            <el-table-column prop="email" label="邮箱" width="">
            </el-table-column>
            <el-table-column label="操作" width="">
                <div slot-scope="{row}">
                    <el-button type="primary" size="mini" @click="edit(row.id)">
                        编辑
                    </el-button>
                    <el-button type="danger" size="mini" @click="del(row.id)">
                        删除
                    </el-button>
                </div>
            </el-table-column>
        </el-table>
        <el-pagination @current-change="currentChange" :current-page.sync="currentPage" :page-size="pageSize" :page-sizes="[5,10,15,20,25]" @size-change="sizeChange" background layout="sizes, prev, pager, next" :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                field: '',
                fieldVal: '',
                loading: false,
                users: [],
                pageSize: 5,
                currentPage: 1,
                total: 0,
                pageNums: 0,
            }
        },
        created() {
            this.getUsers();
        },
        methods: {
            add() {
                this.$router.push({
                    name: 'userAdd'
                })
            },
            edit(id) {
                this.$router.push({
                    name: 'userEdit',
                    params: {
                        id
                    }
                })
            },
            del(id) {
                this.$confirm('确定删除?', '提示').then(() => {
                    this.axios.delete(`/users/del/${id}`).then(() => {
                        this.$message.success('删除成功!!!');
                        this.getUsers();
                    })
                }).catch(() => {
                        this.$message.success('出现问题了!!!');                    
                })
            },
            search() {
                this.getUsers();
            },
            currentChange() {
                this.getUsers();
            },
            sizeChange(size) {
                this.pageSize = size;
                this.getUsers();
            },
            getUsers() {
                this.loading = true;
                this.axios.get('/users', {
                    params: {
                        field: this.field,
                        fieldVal: this.fieldVal,
                        pageSize: this.pageSize,
                        currentPage: this.currentPage
                    }
                }).then((ret) => {
                    this.loading = false;
                    const {
                        data
                    } = ret.data;
                    this.users = data.rows;
                    this.total = data.total;
                    this.pageNums = Math.ceil(data.total / data.pageSize);
                })
            }
        }
    }
</script>

<style>

</style>
